import { Form, Input, Select } from "antd";
import { useEffect } from "react";
import {
	ComponentConfig,
	ComponentSetter,
	useComponentConfigStore,
} from "../../store/component-config";
import { useComponetsStore } from "../../store/components";


/* 
用于动态渲染表单来显示和更新组件的属性
*/
export function ComponentAttr() {
	const [form] = Form.useForm();

    // 获取当前组件的 ID 和详细信息。updateComponentProps 函数用于更新组件属性。
	const { curComponentId, curComponent, updateComponentProps } = useComponetsStore();
    // 获取组件的配置，包含用于渲染表单字段的设置信息
	const { componentConfig } = useComponentConfigStore();

    // useEffect 监听 curComponent 的变化，每当 curComponent 更新时，获取当前表单数据并用组件的 props 更新表单的字段值。这样能确保表单与组件的状态保持同步。
	useEffect(() => {
		const data = form.getFieldsValue();
		form.setFieldsValue({ ...data, ...curComponent?.props });
	}, [curComponent]);

	if (!curComponentId || !curComponent) return null;

    // 根据 ComponentSetter 的 type 属性生成表单元素（下拉选择框或输入框）。type 为 "select" 时渲染 Select 组件，否则渲染 Input
	function renderFormElememt(setting: ComponentSetter) {
		const { type, options } = setting;
		if (type === "select") {
			return <Select options={options} />;
		} else if (type === "input") {
			return <Input />;
		}
	}

    // 表单字段值变化时调用，将变更值传递给 updateComponentProps 函数，更新当前组件的属性。
	function valueChange(changeValues: ComponentConfig) {
		if (curComponentId) {
			updateComponentProps(curComponentId, changeValues);
		}
	}

	return (
		<Form
			form={form}
			onValuesChange={valueChange}
			labelCol={{ span: 8 }}
			wrapperCol={{ span: 14 }}
		>
			<Form.Item label="组件id">
				<Input value={curComponent.id} disabled />
			</Form.Item>
			<Form.Item label="组件名称">
				<Input value={curComponent.name} disabled />
			</Form.Item>
			<Form.Item label="组件描述">
				<Input value={curComponent.desc} disabled />
			</Form.Item>
			{componentConfig[curComponent.name]?.setter?.map((setter) => (
				<Form.Item
					key={setter.name}
					name={setter.name}
					label={setter.label}
				>
					{renderFormElememt(setter)}
				</Form.Item>
			))}
		</Form>
	);
}
